<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="网站设置" name="first">
        <el-form ref="SiteSettings" :model="SiteSettings" label-width="250px">
          <el-form-item label="首页关键字">
            <el-input v-model="SiteSettings.homeKeywords" />
          </el-form-item>
          <el-form-item label="站点标题">
            <el-input v-model="SiteSettings.siteTitle" />
          </el-form-item>
          <el-form-item label="站点标题英文">
            <el-input v-model="SiteSettings.slugTitle" />
          </el-form-item>
          <el-form-item label="站点描述">
            <el-input v-model="SiteSettings.siteDesc" type="textarea" maxlength="200" show-word-limit />
          </el-form-item>
          <el-form-item label="站点前台地址">
            <el-input v-model="SiteSettings.siteWebUrl" />
          </el-form-item>
          <el-form-item label="网站备案号">
            <el-input v-model="SiteSettings.recordNumber" />
          </el-form-item>
          <el-form-item label="留言板喜欢人数">
            <el-input v-model="SiteSettings.likes" disabled />
          </el-form-item>
          <el-form-item label="留言板评论开关">
            <el-switch v-model="SiteSettings.guestbookComment" />
          </el-form-item>
          <el-form-item label="友情链接评论开关">
            <el-switch v-model="SiteSettings.linksComment" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('SITE_SETTINGS', SiteSettings)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="联系" name="second">
        <el-form ref="AdminUserInfo" :model="AdminUserInfo" label-width="150px">
          <el-form-item label="站长名称">
            <el-input v-model="AdminUserInfo.authorName" />
          </el-form-item>
          <el-form-item label="站长描述">
            <el-input v-model="AdminUserInfo.authDesc" />
          </el-form-item>
          <el-form-item label="站长邮箱">
            <el-input v-model="AdminUserInfo.authorEmail" />
          </el-form-item>
          <el-form-item label="站长头像">
            <el-input v-model="AdminUserInfo.authorAvatar" />
          </el-form-item>
          <el-form-item label="QQ">
            <el-input v-model="AdminUserInfo.qq" />
          </el-form-item>
          <el-form-item label="微博">
            <el-input v-model="AdminUserInfo.weibo" />
          </el-form-item>
          <el-form-item label="gitee">
            <el-input v-model="AdminUserInfo.gitee" />
          </el-form-item>
          <el-form-item label="知乎">
            <el-input v-model="AdminUserInfo.knowAbout" />
          </el-form-item>
          <el-form-item label="哔哩哔哩">
            <el-input v-model="AdminUserInfo.bilibili" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('ADMIN_USER_INFO', AdminUserInfo)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="七牛云配置" name="third">
        <el-form ref="QiNiuYun" :model="QiNiuYun" label-width="150px">
          <el-form-item label="七牛路径前缀">
            <el-input v-model="QiNiuYun.qiuniuBasePath" />
          </el-form-item>
          <el-form-item label="七牛ACCESS_KEY">
            <el-input v-model="QiNiuYun.qiniuAccessKey" />
          </el-form-item>
          <el-form-item label="七牛SECRET_KEY">
            <el-input v-model="QiNiuYun.qiniuSecretKey" />
          </el-form-item>
          <el-form-item label="七牛BUCKET_NAME">
            <el-input v-model="QiNiuYun.qiniuBucketName" />
          </el-form-item>
          <el-form-item label="七牛云文件夹名称">
            <el-input v-model="QiNiuYun.qiniuFileName" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('QI_NIU_YUN', QiNiuYun)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="其他配置" name="fourth">
        <el-form ref="OtherOption" :model="OtherOption" label-width="150px">
          <el-form-item label="高德地图apk">
            <el-input v-model="OtherOption.amapApiAk" />
          </el-form-item>
          <el-form-item label="gitee用户名">
            <el-input v-model="OtherOption.giteeName" />
          </el-form-item>
          <el-form-item label="gitee授权码">
            <el-input v-model="OtherOption.giteeAuth" />
          </el-form-item>
          <el-form-item label="网易云音乐歌单id">
            <el-input v-model="OtherOption.playListId" />
          </el-form-item>
          <el-form-item label="百度推送token">
            <el-input v-model="OtherOption.baiduPushToken" />
            <el-alert
              title="获取地址"
              type="info"
              :closable="false"
              show-icon
              center
              description="https://ziyuan.baidu.com/linksubmit/index"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('OTHER_OPTION', OtherOption)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="黑名单设置" name="black">
        <el-form ref="BlackOption" :model="BlackOption" label-width="150px">
          <el-form-item label="IP黑名单">
            <el-alert
              title="注意"
              type="info"
              :closable="false"
              show-icon
              center
              description="使用逗号间隔"
            />
            <el-input v-model="BlackOption.ipsBlack" type="textarea" show-word-limit />
          </el-form-item>
          <el-form-item label="邮箱黑名单">
            <el-alert
              title="注意"
              type="info"
              :closable="false"
              show-icon
              center
              description="使用逗号间隔"
            />
            <el-input v-model="BlackOption.mailsBlack" type="textarea" show-word-limit />
          </el-form-item>
          <el-form-item label="关键字黑名单">
            <el-alert
              title="注意"
              type="info"
              :closable="false"
              show-icon
              center
              description="使用逗号间隔"
            />
            <el-input v-model="BlackOption.keywordsBlack" type="textarea" show-word-limit />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('BLACK_OPTION', BlackOption)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { updateConfig, feachList } from '@/api/sysconfig'
export default {
  name: 'Config',
  data() {
    return {
      activeName: 'first',
      AdminUserInfo: {},
      BlackOption: {},
      OtherOption: {},
      QiNiuYun: {},
      SiteSettings: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const { result } = await feachList()
      result.forEach(config => {
        if (config.relKey === 'SITE_SETTINGS') {
          this.SiteSettings = JSON.parse(config.relValue)
        }
        if (config.relKey === 'ADMIN_USER_INFO') {
          this.AdminUserInfo = JSON.parse(config.relValue)
        }
        if (config.relKey === 'QI_NIU_YUN') {
          this.QiNiuYun = JSON.parse(config.relValue)
        }
        if (config.relKey === 'OTHER_OPTION') {
          this.OtherOption = JSON.parse(config.relValue)
        }
        if (config.relKey === 'BLACK_OPTION') {
          this.BlackOption = JSON.parse(config.relValue)
        }
      })
    },
    onSubmit(key, obj) {
      updateConfig(key, JSON.stringify(obj)).then(res => {
        if (res.code === 0) {
          this.$notify({
            type: 'success',
            message: '修改成功',
            duration: 2000
          })
          this.$store.dispatch('sysconfig/info')
          this.getData()
        }
      })
    }
  }
}
</script>
